<template>
	<AppHeader :title="title" :banAnimate="true">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
		<template #right>
			<img @click="onClickRight" src="@/assets/images/listening/copy.png" width="18" height="18" />
		</template>
	</AppHeader>
	<div class="container">
		<div class="main">
			<div class="qs-txt a">一、听力理解</div>
			<div class="qs-txt b" v-if="questionStemDetail">
				{{ questionStemDetail.templateSettings.content}}
			</div>
			<div class="qs"
				v-if="answeringSteps!='started'&&answeringSteps!='waiting'&& (questionType ==1||questionType ==5)">
				<pre>{{questionBody}}</pre>
			</div>
			<div class="qs" v-if="answeringSteps!='started'&&answeringSteps!='waiting'&& questionType ==3">
				<img :src="questionSrc" style="width: 100%;" />
			</div>
			<div class=" options"
				v-if="questionOption.length > 0 && questionType ==1&& (answeringSteps!='started'&&answeringSteps!='waiting')">
				<div v-for="(item, index) in questionOption" @click="selectQuestionAnswer(item,index)">
					<p :class="choiceQuestionsIndex==index?'active':''">{{ optionsMap[index] }}</p>
					<span v-if="item.value[0].body">{{ item.value[0].body }}</span>
					<img v-else :src="baseUrl + item.value[0].attachments[0].url" style="width: 60px;height: 60px;" />
				</div>
			</div>
			<div class=" options"
				v-if="questionOption.length > 0 && questionType ==5&& (answeringSteps=='answerStart'||answeringSteps=='answerEnd')">
				<div v-for="(item, index) in questionOption" @click="selectQuestionAnswer(item,index)">
					<p :class="choiceQuestionsIndex==index?'active':''">{{ optionsMap[index] }}</p>
					<span v-if="item.value[0].body">{{ item.value[0].body }}</span>
					<img v-else :src="baseUrl + item.value[0].attachments[0].url" style="width: 60px;height: 60px;" />
				</div>
			</div>
			<div class=" options"
				v-if="questionOption.length > 0 && answeringSteps!='started'&&answeringSteps!='waiting'&& questionType ==3">
				<div v-for="(item, index) in questionOption"
					style="display: flex;align-items: center;border-bottom: 1px solid #EBEDF0;">
					<div style="font-size: 14px;">{{ item.sort}}</div>
					<van-field v-model="item.write" />
				</div>
			</div>
		</div>
		<div class="fillbox"></div>
		<div class="actions" v-if="!isNextStep&&answeringSteps!='ended'">
			<div class="circle" v-if="answeringSteps=='started'">
				<img src="@/assets/images/listening/icon-horn.gif" />
			</div>
			<div class="circle" v-if="answeringSteps=='readingQuestions'">
				<van-circle class="van-circle" :current-rate="currentRate" start-position="top" color="#0cb76c"
					size="70" />
				<img src="@/assets/images/listening/icon-read.png" />
			</div>
			<div class="circle" v-if="answeringSteps=='firstTime'||answeringSteps=='twoTime'">
				<van-circle class="van-circle" :current-rate="currentRate" start-position="top" color="#0cb76c"
					size="70" />
				<img src="@/assets/images/listening/voice.png" />
			</div>
			<div class="circle" v-if="answeringSteps=='answerStart'">
				<van-circle class="van-circle" :current-rate="currentRate" start-position="top" color="#0cb76c"
					size="70" />
				<img src="@/assets/images/listening/voice.png" />
			</div>

			<div class="next-currentQuestion" @click="handleNextStep"
				v-if="answeringSteps=='started'||answeringSteps=='readingQuestions'|| answeringSteps=='firstTime'||answeringSteps=='twoTime'">
				下一步</div>
			<div class="next-currentQuestion" @click="handleNextQuestion" v-if="answeringSteps=='answerStart'">
				下一题</div>
		</div>
		<span class="tips"
			v-if="!isNextStep&&answeringSteps!='notStarted'&& answeringSteps!='waiting' && answeringSteps!='answerEnd'&&answeringSteps!='ended' && bottomText && remainingTime!==''">
			{{bottomText}} 剩余<span class="time">{{ remainingTime }}s</span>
		</span>

		<!-- 题型音频 -->
		<audio ref="questionStemAudio" style="display: none" @ended="questionStemAudioEnd"
			@timeupdate="questionStemAudioUpdate">
			<source type="audio/mpeg" />
		</audio>
		<!-- 题目音频 -->
		<audio ref="questionAudio" style="display: none" @ended="questionAudioEnd">
			<source type="audio/mpeg" />
		</audio>
		<!-- @timeupdate="questionAudioUpdate" -->
		<!-- 考试开始音频 -->
		<audio ref="examBeginsAudio" style="display: none" @ended="examBeginsEnd">
			<source type="audio/mpeg" />
		</audio>
		<!-- 考试结束音频 -->
		<audio ref="examOverAudio" style="display: none" @ended="examOverAudioEnd">
			<source type="audio/mpeg" />
		</audio>
		<!-- 开始答题音频 -->
		<audio ref="startAnsweringAudio" style="display: none" @ended="startAnsweringAudioEnd">
			<source type="audio/mpeg" />
		</audio>
		<!-- 停止答题音频 -->
		<audio ref="stopAnsweringAudio" style="display: none" @ended="stopAnsweringAudioEnd">
			<source type="audio/mpeg" />
		</audio>
		<VanActionSheet v-model:show="showPopup" :round="false" teleport="body" @closed="showPopup = false"
			class="question-list-popup" style="height: 50%">
			<div class="content">
				<div v-for="(item,index) in listeningList" :key="item.id" @click="changeQuestionStem(item,index)"
					:class="item.isFinish?'question-item Finish':'question-item '">
					<span class="question-item-title">第{{ index+1 }}大题</span>
					<img src="@/assets/images/wrongBook/icon-arrow-right-gray.png" />
				</div>
				<div class="btn">
					<VanButton size="small" color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)"
						@click="examOverAudioEnd">完成</VanButton>
				</div>
			</div>
		</VanActionSheet>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		ActionSheet as VanActionSheet,
		Button as VanButton
	} from "vant";
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		nextTick
	} from "vue";
	import {
		getBookChapterDetail,
		getMockTests,
		saveExercise
	} from "@/api/listening";
	import {
		useRouter,
		useRoute
	} from "vue-router";

	const router = useRouter();
	const route = useRoute();
	const title = route.query.title;

	const totalTime = ref(0);
	const questionsText = ref("");
	const audioView = ref(0);
	const isQs = ref(true);
	const options = ref([]);
	const showPopup = ref(false); //是否展示切换大题

	const listeningList = ref([]); //听力题目资源列表
	const baseUrl = ref(""); //资源访问基地址
	const examBeginsAudio = ref(null); //考试开始音频Dom
	const examOverAudio = ref(null); //考试结束音频Dom
	const startAnsweringAudio = ref(null); //开始答题音频Dom
	const stopAnsweringAudio = ref(null); //结束答题音频Dom

	const questionStemAudio = ref(null); //题型音频Dom
	const questionStemIndex = ref(0); //当前题型音频
	const questionStemDetail = ref(null); //当前题型详情

	const questionAudio = ref(null); //题目音频Dom
	const questionSrc = ref(null) //题目图片链接
	const questionBody = ref(null) //题目题干
	const questionIndex = ref(0); //当前题目索引
	const questionDetail = ref(null); //当前题目详情
	const questionOption = ref([]); //当前题目选项
	const questionType = ref(null); //当前题目类型 1选择题
	const isHaveLastQuestion = ref(false); //当前题目是否是最后一题
	const optionsMap = ["A", "B", "C", "D", "E", "F", "G"]; //题目选项映射

	const choiceQuestionsIndex = ref(null) //选择题选择的答案索引

	const answeringSteps = ref('notStarted')
	// 答题步骤  notStarted未开始 waiting等待  started 开始  ended 结束 readingQuestions 阅题  firstTime 第一次听题 twoTime 第二次听题  answerStart 答题开始  answerEnd 答题结束
	const answeringStepsTimeVal = ref(null) //答题步骤延时器
	const bottomText = ref('') //底部文字
	const remainingTime = ref('') //剩余时间
	const remainingTimeval = ref(null) //剩余时间定时器

	const allTime = ref('') //题目总时间

	const currentRate = ref(0); //圆形当前数值
	const rateTimeVal = ref(null) //圆形计算定时器

	const isNextStep = ref(false) //是否下一步
	const onClickLeft = () => {
		router.back();
	};
	const onClickRight = () => {
		showPopup.value = true
	};
	const resetQuestionStatus = () => {
		clearTimeout(answeringStepsTimeVal.value)
		if (questionStemAudio.value) {
			questionStemAudio.value.pause()
			questionStemAudio.value.currentTime = 0
		}
		if (questionAudio.value) {
			questionAudio.value.pause()
			questionAudio.value.currentTime = 0
		}
		if (examBeginsAudio.value) {
			examBeginsAudio.value.pause()
			examBeginsAudio.value.currentTime = 0
		}
		if (examOverAudio.value) {
			examOverAudio.value.pause()
			examOverAudio.value.currentTime = 0
		}
		if (startAnsweringAudio.value) {
			startAnsweringAudio.value.pause()
			startAnsweringAudio.value.currentTime = 0
		}
		if (stopAnsweringAudio.value) {
			stopAnsweringAudio.value.pause()
			stopAnsweringAudio.value.currentTime = 0
		}
	};

	const handleNextStep = () => {
		resetQuestionStatus()
		isNextStep.value = true
		if (answeringSteps.value == "started") {
			// answeringSteps.value = "waiting"
			answeringStepsTimeVal.value = setTimeout(() => {
				answeringSteps.value = "readingQuestions"
				isNextStep.value = false
			}, 1000)
		}
		if (answeringSteps.value == "readingQuestions") {
			// answeringSteps.value = "waiting"
			answeringStepsTimeVal.value = setTimeout(() => {
				answeringSteps.value = "firstTime"
				isNextStep.value = false
			}, 1000)
		}
		if (answeringSteps.value == "firstTime") {
			// answeringSteps.value = "waiting"
			answeringStepsTimeVal.value = setTimeout(() => {
				answeringSteps.value = "twoTime"
				isNextStep.value = false
			}, 1000)
		}
		if (answeringSteps.value == "twoTime") {
			// answeringSteps.value = "waiting"
			answeringStepsTimeVal.value = setTimeout(() => {
				answeringSteps.value = "answerStart"
				isNextStep.value = false
			}, 1000)
		}
	};
	const handleNextQuestion = () => {
		resetQuestionStatus()
		isNextStep.value = true
		answeringStepsTimeVal.value = setTimeout(() => {
			isNextStep.value = false
			stopAnsweringAudioEnd()
		}, 1000)
	};
	//监听答题步骤
	watch(answeringSteps, (newVal) => {
		console.log('答题步骤', newVal)
		// clearTimeout(answeringStepsTimeVal.value)
		if (newVal == 'started') {
			questionIndex.value = 0
			questionStemDetail.value = listeningList.value[questionStemIndex.value]
			questionStemAudio.value.src = baseUrl.value + questionStemDetail.value.templateSettings.audioUrl;
			questionStemAudio.value.play();
		}
		if (newVal == 'readingQuestions') {
			questionType.value = questionStemDetail.value.questions[0].type
			// console.log(questionType.value)
			if (questionType.value == 1) {
				questionDetail.value = questionStemDetail.value.questions[0].children[questionIndex.value]
				questionOption.value = questionDetail.value.options
				questionBody.value = questionDetail.value.trunk.body
			} else if (questionType.value == 5) {
				questionDetail.value = questionStemDetail.value.questions[0]
				questionOption.value = questionDetail.value.children[questionIndex.value].options
				questionBody.value = questionDetail.value.trunk.body
			} else if (questionType.value == 3) {
				questionDetail.value = questionStemDetail.value.questions[0]
				questionOption.value = questionDetail.value.options
				for (let i = 0; i < questionDetail.value.trunk.attachments.length; i++) {
					const attachment = questionDetail.value.trunk.attachments[i];
					if (attachment.fileType === 1) {
						questionSrc.value = baseUrl.value + attachment.url;
					}
				}
			}
			// 遍历附件以查找音频
			let isHaveQuestionAudio = false
			for (let i = 0; i < questionDetail.value.trunk.attachments.length; i++) {
				const attachment = questionDetail.value.trunk.attachments[i];
				if (attachment.fileType === 2) {
					// 找到音频文件，设置src并播放  
					questionAudio.value.src = baseUrl.value + attachment.url;
					isHaveQuestionAudio = true
				}
			}
			let lookTime = questionStemDetail.value.templateSettings.listeningAndSpeakingRule.lookTime
			bottomText.value = '阅题时间'
			remainingTime.value = lookTime
			setRemainingInterval()
			if (lookTime) {
				setRateInterval(lookTime)
			}
			if (questionType.value == 5 && isHaveLastQuestion.value) {
				answeringSteps.value = "waiting"
				answeringStepsTimeVal.value = setTimeout(() => {
					answeringSteps.value = "answerStart"
				}, 1000)
			} else if (questionType.value == 3 && !isHaveQuestionAudio) {
				answeringSteps.value = "waiting"
				answeringStepsTimeVal.value = setTimeout(() => {
					answeringSteps.value = "answerStart"
				}, 1000)
			} else {
				answeringStepsTimeVal.value = setTimeout(() => {
					answeringSteps.value = "firstTime"
				}, (lookTime + 1) * 1000)
			}

		}
		if (newVal === 'firstTime' || newVal === 'twoTime') {
			playAudioAndUpdateText(newVal);
		}
		if (newVal == 'answerStart') {
			bottomText.value = '答题时间'
			questionBody.value = questionStemDetail.value.questions[0].children[questionIndex.value].trunk.body
			let answerTime = questionStemDetail.value.templateSettings.listeningAndSpeakingRule.answerTime
			remainingTime.value = answerTime
			setRemainingInterval()
			setRateInterval(answerTime)
			startAnsweringAudio.value.src = "https://oss.bigchun.com/file/2kaishidati.mp3"
			startAnsweringAudio.value.play()
		}
		if (newVal == 'answerEnd') {
			stopAnsweringAudio.value.src = "https://oss.bigchun.com/file/4tingzhidati.mp3"
			stopAnsweringAudio.value.play()
		}
	})
	//监听题目改编
	watch(questionIndex, (newVal) => {
		// console.log("题目编号:" + newVal)
		if (newVal == 0) {
			return false
		}
		answeringSteps.value = "waiting"
		answeringStepsTimeVal.value = setTimeout(() => {
			answeringSteps.value = "readingQuestions"
		}, 1000)
	})
	//切换题目
	const changeQuestionStem = (item, index) => {
		answeringSteps.value = "waiting"
		resetQuestionStatus()
		answeringStepsTimeVal.value = setTimeout(() => {
			isHaveLastQuestion.value = false
			questionStemIndex.value = index
			answeringSteps.value = "started"
			showPopup.value = false
		}, 200)
	}
	//获取音频或图片资源
	const playAudioAndUpdateText = (newVal) => {
		// 根据newVal设置底部文本  
		if (newVal === 'firstTime') {
			bottomText.value = '正在播放原音';
		} else if (newVal === 'twoTime') { // 注意：这里假设是'twoTime'而不是'twoTime'，如果确实是'twoTime'则保留  
			bottomText.value = '再一次播放原音';
		}

		questionAudio.value.play();
		let palyTime = Math.round(questionAudio.value.duration)
		remainingTime.value = palyTime
		setRemainingInterval()
		setRateInterval(palyTime)
	}
	//选择问题答案
	const selectQuestionAnswer = (item, index) => {
		// console.log(item, index)
		choiceQuestionsIndex.value = index

	}
	// "5024141575522749747"
	const getTests = async () => {
		getMockTests({
			id: route.query.versionId
		}).then((res) => {
			for (var i = 0; i < res.data.resource.items.length; i++) {
				var item = res.data.resource.items[i];
				var questions = item.questions;
				// 如果questions长度大于1，将其包装为带有children属性的对象  
				if (questions.length > 1) {
					item.questions = [{
						children: questions,
						type: 1
					}];
				}
			}
			for (var i = 0; i < res.data.resource.items.length; i++) {
				var item = res.data.resource.items[i];
				item.isFinish = false
				var questions = item.questions;
				// 如果questions的第一个元素存在，且其children为空数组，则将其自身包装为children  
				if (questions.length > 0 && questions[0].children.length === 0) {
					questions[0].children = [{
						...questions[0]
					}];
				}
				for (var j = 0; j < questions[0].children.length; j++) {
					let answerInfo = null;
					let questionsOptions = JSON.parse(JSON.stringify(questions[0].children[j].options))
					if (questions[0].children[j].type == 3) {
						answerInfo = questionsOptions.map(item => {
							try {
								// 尝试将字符串解析为JSON数组  
								const parsed = JSON.parse(item.value[0].body);
								// 如果解析成功且是数组，则返回该数组  
								if (Array.isArray(parsed)) {
									return parsed;
								}
								return [item.value[0].body];
							} catch (e) {
								// 如果解析失败（即不是有效的JSON），将原始字符串作为一个元素的数组返回  
								return [item.value[0].body];
							}
						})
					} else {
						answerInfo = questionsOptions.findIndex(item => {
							return item.isAnswer
						})
					}
					questions[0].children[j] = {
						answer: answerInfo,
						score: questions[0].children[j].type == 3 ? 5 : 1,
						questionRefSorce: 0,
						select: null,
						write: null,
						...questions[0].children[j]
					}
				}
			}
			listeningList.value = res.data.resource.items
			baseUrl.value = res.data.resmain;
			console.log(listeningList.value)
			examBeginsAudio.value.src = "https://oss.bigchun.com/file/1kaoshikaishi.mp3"
			examBeginsAudio.value.play()
		});
	};
	//考试开始音频播放完成
	const examBeginsEnd = () => {
		answeringSteps.value = "started"
	};
	//考试结束音频播放完成
	const examOverAudioEnd = () => {
		// console.log("考试结束^_^")
		// answeringSteps.value = "ended"
		let use_time = Math.floor((Date.now() - totalTime.value) / 1000);
		let listeningSuccessJSON = listeningList.value
		let listeningListData = []
		for (let i = 0; i < listeningSuccessJSON.length; i++) {
			listeningListData = listeningListData.concat(listeningSuccessJSON[i].questions[0].children)
		}
		let answer_score_json = []
		for (let i = 0; i < listeningListData.length; i++) {
			let data = {
				color: listeningListData[i].questionRefSorce ? "green" : "red",
				questionid: {
					version_id: listeningListData[i].versionId
				},
				score: listeningListData[i].questionRefSorce,
				select: listeningListData[i].type != 3 ? listeningListData[i].select : "",
				write: listeningListData[i].type == 3 ? listeningListData[i].options.map(item => {
					return item.write
				}).toString() : "",
				url: ""
			}
			answer_score_json.push(data)
		}
		let totalScore = 0;
		answer_score_json.forEach(item => {
			totalScore += item.score ? item.score : 0;
		});

		let listeningSuccessInfo = {
			source_id: route.query.versionId,
			mission_id: route.query.mission_id,
			question_type: 0,
			question_source_type: 2,
			use_time: use_time,
			answer_score_json: JSON.stringify(answer_score_json),
			total_score: totalScore,
			json: JSON.stringify(listeningList.value)
		}
		localStorage.setItem('listeningSuccessInfo', JSON.stringify(listeningSuccessInfo))
		router.push({
			path: "/listening/hand-work",
			query: {
				versionId: route.query.versionId,
				title: route.query.title,
				mission_id: route.query.mission_id,
			}
		})
		// saveExercise({
		// 	source_id: route.query.versionId,
		// 	mission_id: route.query.mission_id,
		// 	question_type: 0,
		// 	question_source_type: 2,
		// 	use_time: use_time,
		// 	answer_score_json: JSON.stringify(answer_score_json),
		// 	total_score: totalScore,
		// 	json: JSON.stringify(listeningList.value)
		// }).then(res => {
		// 	router.push({
		// 		path: "/listening/hand-work",
		// 		query: {
		// 			versionId: route.query.versionId,
		// 			title: route.query.title,
		// 			mission_id:route.query.mission_id,
		// 		}
		// 	})
		// 	localStorage.setItem('listeningSuccessData', JSON.stringify(res.data))
		// })
	};

	//题型音频加载
	const questionStemAudioUpdate = () => {
		if (questionStemAudio.value && questionStemAudio.value.duration) {
			bottomText.value = '正在播放原音'
			remainingTime.value = Math.round(questionStemAudio.value.duration - questionStemAudio.value.currentTime);
		}
	};
	//题型音频播放完成
	const questionStemAudioEnd = () => {
		answeringSteps.value = "readingQuestions"

	};

	//题目音频加载
	// const questionAudioUpdate = () => {
	// 	if (questionAudio.value.duration) {
	// 		remainingTime.value = Math.round(questionAudio.value.duration - questionAudio.value.currentTime);
	// 		currentRate.value = (questionAudio.value.currentTime / questionAudio.value.duration).toFixed(1) * 100
	// 		if (currentRate.value == 100) {
	// 			currentRate.value = 0;
	// 		}
	// 	}
	// };
	//题目音频播放完成
	const questionAudioEnd = () => {
		if (answeringSteps.value == "twoTime") {
			// answeringSteps.value = "waiting"
			answeringStepsTimeVal.value = setTimeout(() => {
				answeringSteps.value = "answerStart"
			}, 1000)

		}
		if (answeringSteps.value == "firstTime") {
			// answeringSteps.value = "waiting"
			answeringStepsTimeVal.value = setTimeout(() => {
				answeringSteps.value = "twoTime"
			}, 1000)
		}
	};
	//开始答题音频播放完成
	const startAnsweringAudioEnd = () => {
		answeringStepsTimeVal.value = setTimeout(() => {
			answeringSteps.value = "answerEnd"
		}, questionStemDetail.value.templateSettings.listeningAndSpeakingRule.answerTime * 1000)
	};
	//停止答题音频播放完成
	const stopAnsweringAudioEnd = () => {
		//获取当前选题目答案
		// console.log(questionStemDetail.value, "题干详情")
		// console.log(questionDetail.value, "题目详情")
		// console.log(questionOption.value, "题目选项详情")
		// console.log(questionType.value, "题目类型")
		let questionItem = listeningList.value[questionStemIndex.value].questions[0].children[questionIndex.value]
		if (questionType.value == 1) {
			questionItem.select = choiceQuestionsIndex.value
			if (choiceQuestionsIndex.value == questionDetail.value.answer) {
				questionItem.questionRefSorce = questionDetail.value.score
			} else {
				questionItem.questionRefSorce = 0
			}
		}
		if (questionType.value == 5) {
			questionItem.select = choiceQuestionsIndex.value
			if (choiceQuestionsIndex.value == questionItem.answer) {
				questionItem.questionRefSorce = questionItem.score
			} else {
				questionItem.questionRefSorce = 0
			}
		}
		if (questionType.value == 3) {
			for (var i = 0; i < questionOption.value.length; i++) {
				questionOption.value[i].score = 1
				if (!questionOption.value[i].write) {
					questionOption.value[i].write = null
				}
				if (questionItem.answer[i].includes(questionOption.value[i].write)) {
					questionOption.value[i].questionRefSorce = 1
				} else {
					questionOption.value[i].questionRefSorce = 0
				}
			}
			questionOption.value.forEach(item => {
				questionItem.questionRefSorce += item.questionRefSorce;
			});
			questionItem.options = questionOption.value
		}
		choiceQuestionsIndex.value = null
		// console.log(listeningList.value)

		if (questionStemIndex.value == listeningList.value.length - 1) {
			examOverAudio.value.src = "https://oss.bigchun.com/file/3kaoshijieshu.mp3"
			examOverAudio.value.play()
			answeringSteps.value = "ended"
			return false
		}
		if (questionIndex.value == questionStemDetail.value.questions[0].children.length - 1) {
			questionStemIndex.value++
			listeningList.value[questionStemIndex.value].isFinish = true
			console.log("题干变化")
			isHaveLastQuestion.value = false
			answeringSteps.value = "started"
		} else {
			isHaveLastQuestion.value = true
			questionIndex.value++
		}
	};


	const setRemainingInterval = () => {
		clearInterval(remainingTimeval.value);
		remainingTimeval.value = setInterval(() => {
			remainingTime.value--
			if (remainingTime.value == 0) {
				clearInterval(remainingTimeval.value);
			}
		}, 1000);
	};

	const setRateInterval = (time) => {
		currentRate.value = 0;
		clearInterval(rateTimeVal.value);
		const stepTime = 100 / time;
		rateTimeVal.value = setInterval(() => {
			currentRate.value += stepTime;
			if (currentRate.value >= 100) {
				setTimeout(() => {
					currentRate.value = 0
				}, 200)
				clearInterval(rateTimeVal.value);
			}
		}, 1000);
	};


	onMounted(async () => {
		totalTime.value = Date.now();
		getTests();

	});
	onUnmounted(() => {
		resetQuestionStatus()
	});
</script>

<style lang="scss" scoped>
	.question-list-popup {
		font-family: PingFangSC, PingFang SC;

		.content {
			padding: 0px 0px 75px;
			background-color: #fafafa;

			.question-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16px 10px;
				background-color: #fafafa;
				border-bottom: 1px solid #e5e5e5;
				color: #333;

				&-title {
					font-size: 16px;
				}

				img {
					width: 7px;
				}
			}

			.Finish {
				background-color: #ffffff;
				color: #d7d7d7 ;
			}

			.btn {
				background-color: #fff;
				padding: 10px;
				box-sizing: border-box;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
				box-shadow: 0px -2px 8px 0px rgba(24, 24, 24, 0.08);

				.van-button {
					height: 45px;
					width: 100%;
					border-radius: 20px;
					font-size: 18px;
					font-weight: 500;
				}
			}
		}
	}

	.container {
		height: 100%;
		background-color: #f5f5f5;
		padding-top: 56px;

		.main {
			min-height: 420px;
			background-color: #ffffff;
			border-radius: 15px;
			padding: 10px;
			margin: 0 10px 20px;

			.qs-txt {
				font-size: 14px;
				color: #b5b5b5;

				&.a {
					margin-bottom: 10px;
				}

				&.b {
					line-height: 28px;
				}
			}

			.qs {
				font-size: 16px;
				color: #333333;
				margin-top: 20px;
				font-weight: bold;

				pre {
					white-space: pre-wrap;
				}
			}

			.options {
				height: 250px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.active {
					background-color: #0cb76c;
					color: #ffffff;
				}

				p {
					width: 30px;
					height: 30px;
					margin-right: 20px;
					text-align: center;
					line-height: 30px;
					border: 1px solid #0cb76c;
					color: #0cb76c;
					border-radius: 50%;
					font-size: 16px;
				}

				div {
					display: flex;
					align-items: center;
				}

				span {
					font-size: 14px;
				}



			}

		}

		.fillbox {
			height: 110px;
			background-color: #F5F5F5;
		}

		.actions {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 28px;
			padding: 10px 0;
			background-color: #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: center;

			.circle {
				position: relative;
				height: 70px;
				width: 70px;

				.van-circle {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				img {
					width: 52px;
					height: 52px;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.next-currentQuestion {
				font-size: 16px;
				color: #0cb76c;
				font-weight: bold;
				position: absolute;
				right: 56px;
			}
		}

		.tips {
			height: 28px;
			width: 100%;
			background-color: #DDEFE7;
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			font-size: 12px;
			text-align: center;
			line-height: 28px;

			.time {
				color: #0cb76c;
			}
		}
	}
</style>